<template>
  <div>
    <p>{{ level | formatLevel }}</p>
    <input type="text" v-model="tel" />
    <span>它的归属地为：{{ city }}</span>
    <p>带前缀的电话号码：{{cqTel}}</p>

    <hr>
    <p ref='pRef'>父组件num:{{num}}</p>
    <inputnum ref="inputRef" :num="num" @changenum="changenum"></inputnum>

    <button @click="getRef">获取ref</button>

    <dialogcom>

        <div slot="footer" slot-scope="scope">
          <button>{{scope.confirm}}</button>
          <button>{{scope.cancel}}</button>
        </div>

      用户名：<input type="text">
      密码： <input type="password">

  
    </dialogcom>

    <test v-model="num"></test>

  </div>
</template>
<script>
import inputnum from './components/input-number.vue'
import dialogcom from './components/dialog.vue'
import test from './components/test.vue'
export default {
  data() {
    return {
      level: 1,
      tel: 12314342345,
      city: "",
      num: 0
    };
  },
  components: {
    inputnum,
    dialogcom,
    test
  },
  methods: {
    changenum(num) {
      console.log(num);
      this.num = num
      this.$nextTick(() => {
        console.log(this.$refs.pRef.innerHTML);
      })
    },
    getRef() {
      console.log(this.$refs);
    }
  },
  filters: {
    formatLevel(level) {
      switch (level) {
        case 1:
          return "一级";

        default:
          return "二级";
      }
    },
  },
  computed: {
    cqTel() {
      return '023-' + this.tel
    }
  },
  watch: {
    tel: {
      handler: function () {
        setTimeout(() => {
          this.city = "重庆";
        }, 1000);
      },
      immediate: true,
      // deep: true
    },
  },
};
</script>
<style>
</style>